<template>
  <div class="add-goods">
    <el-breadcrumb separator="/" class="tittle">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order' }">订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>订单添加</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="goodsForm"
        label-width="100px"
        class="demo-goodsForm"
      >
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="购买数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="购买人" prop="username">
          <el-input v-model="goodsForm.username"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="goodsForm.address"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" required>
          <el-col :span="11">
            <el-form-item prop="time">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="goodsForm.time"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">创建</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsForm: {
        title: '',
        num: '',
        username: '',
        address: '',
        time: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        num: [{ required: true, message: '请输购买数量', trigger: 'blur' }],
        username: [{ required: true, message: '请输购买人', trigger: 'blur' }],
        address: [{ required: true, message: '请输收货地址', trigger: 'blur' }],
        time: [{ required: true, message: '请输入购买日期', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.add-goods {
  margin: 20px;
}
.tittle {
  padding: 20px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.form {
  background: #fff;
  padding: 10px;
}
.line {
  text-align: center;
}
</style>
